<template>
  <div class="configuration-container">
    <div v-if="hasRouteAuth('system:cost:read') || hasRouteAuth('system:cost:add')" class="order-config">
      <costComponent />
    </div>
    <div class="resource-config" style="margin-bottom:50px;">
      <Title title="资源配置" style="margin-bottom:20px;"/>
      <resourceConfig style="padding-left: 13px;"/>
    </div>
    <div v-if="isAdmin || hasRouteAuth('system:chart:read') || hasRouteAuth('system:chart:admin') || hasRouteAuth('system:chart:add')" class="charts-config">
      <chartsTabConfig />
    </div>
    <div v-if="showMengliConfig" class="mengli-config">
      <mengli-config />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
// 组件
import Title from '@/components/Title';
import costComponent from '@/components/Configuration/costComponent';
import chartsTabConfig from '@/components/Configuration/chartsTabConfig';
import mengliConfig from '@/components/Configuration/mengliConfig';
import resourceConfig from '@/components/Configuration/resourceConfig';

export default {
  components: {
    Title,
    costComponent,
    chartsTabConfig,
    mengliConfig,
    resourceConfig
  },
  computed: {
    ...mapGetters([
      'resourceIsShowPlatform',
      'resourceIsShowOrgan',
      'resourceShowId'
    ]),
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    showMengliConfig() {
      const reportAuth = hasRouteAuth('system:mengliRepo:read') || hasRouteAuth('system:mengliRepo:edit') || hasRouteAuth('system:mengliRepo:create') || hasRouteAuth('system:mengliRepo:delete');
      const mengliAuth = hasRouteAuth('system:ipSeries:read') || hasRouteAuth('system:ipSeries:edit') || hasRouteAuth('system:ipSeries:create') || hasRouteAuth('system:ipSeries:delete');
      return this.isAdmin || mengliAuth || reportAuth;
    }
  },
  methods: {
    hasRouteAuth,
    resourceShowChange(boolean, type) {
      switch (type) {
        case 'plat':
          this.$store.dispatch('PlatformChange', boolean);
          break;
        case 'organ':
          this.$store.dispatch('OriginzationChange', boolean);
          break;
        case 'id':
          this.$store.dispatch('IdChange', boolean);
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.configuration-container {
  margin: 24px;
  box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  border-radius:12px;
  background-color: #fff;
  padding: 24px;
  min-height: calc(100vh - 96px);
}
.order-config {
  margin-bottom: 50px;
}
.charts-config {
  margin-bottom: 50px;
}
</style>
